<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>_ButtonMixin tests</title>

	<style type="text/css">
		@import "../../themes/claro/document.css";
		@import "../../themes/dijit.css";

		#table {
			margin: 0;
			padding: 2px;
		}
		#table, .dijit, BUTTON {
			font-family: monospace;
			font-size: 12pt;
		}
		#table .layout {
			padding: 2px;
			font-size: 100%;
			margin: 0;
		}
	</style>
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="parseOnLoad: true, isDebug: true"></script>

	<script type="text/javascript">
		dojo.require("doh.runner");
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.Dialog");
		dojo.require("dijit.form.Button");
		dojo.require("dojox.mobile.Button");

		dojo.ready(function(){

			doh.register("attributes", [
				{
					name: "dijit",
					runTest: function(){
						var dijit_attributes = dijit.byId('dijit_attributes');
						doh.is("original", dijit_attributes.get('label'), "dijit original get('label')");
						dijit_attributes.set('label', "label");
						doh.is("label", dijit_attributes.get('label'), "dijit get('label')");
						doh.t(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass), "dijit baseClass");
						doh.t(dojo.hasClass(dijit_attributes.domNode, "mblRedButton"), "dijit original class");
						dijit_attributes.set('class', "mblBlueButton");
						doh.t(dojo.hasClass(dijit_attributes.domNode, "mblBlueButton"), "dijit new class");
					}
	 			},
				{
					name: "mobile",
					runTest: function(){
						var mobile_attributes = dijit.byId('mobile_attributes');
						doh.is("original", mobile_attributes.get('label'), "mobile original get('label')");
						mobile_attributes.set('label', "label");
						doh.is("label", mobile_attributes.get('label'), "mobile get('label')");
						doh.t(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass), "mobile baseClass");
						doh.t(dojo.hasClass(mobile_attributes.domNode, "mblRedButton"), "mobile original class");
						mobile_attributes.set('class', "mblBlueButton");
						doh.t(dojo.hasClass(mobile_attributes.domNode, "mblBlueButton"), "mobile new class");
					}
	 			}
			]);

			doh.register("programmatic", [
				{
					name: "dijit",
					timeout: 2000,
					runTest: function(){
						new dijit.form.Button({id:"dijit_programmatic", type:"button", label:"No srcNodeRef"}).placeAt("dijit_programmatic_container", "first");
						var dijit_programmatic = dijit.byId('dijit_programmatic');
						var pos = dojo.position(dijit_programmatic.domNode, true);
						doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'dijit position');
						doh.is("No srcNodeRef", dijit_programmatic.get('label'), 'dijit widget label');
					}
	 			},
				{
					name: "mobile",
					timeout: 2000,
					runTest: function(){
						new dojox.mobile.Button({id:"mobile_programmatic", type:"button", label:"No srcNodeRef"}).placeAt("mobile_programmatic_container", "first");
						var mobile_programmatic = dijit.byId('mobile_programmatic');
						var pos = dojo.position(mobile_programmatic.domNode, true);
						doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'mobile position');
						doh.is("No srcNodeRef", mobile_programmatic.get('label'), 'mobile widget label');
					}
	 			}
			]);

			var runTests = function(t,i){
				var	d = new doh.Deferred(),
					form = document.getElementById('myform'),
					clicks = document.getElementById('clicks'),
					submits = document.getElementById('submits'),
					bubbles = document.getElementById('bubbles');
				form.reset();
				document.getElementById('native'+i).click();
				setTimeout(function(){
					var nativeClicks = clicks.value;
					var nativeSubmits = submits.value;
					var nativeBubbles = bubbles.value;
					form.reset();
					document.getElementById('widget'+i).click();
					setTimeout(function(){
						var widgetClicks = clicks.value;
						var widgetSubmits = submits.value;
						var widgetBubbles = bubbles.value;
						form.reset();
						document.getElementById('mobile'+i).click();
						setTimeout(function(){
							var mobileClicks = clicks.value;
							var mobileSubmits = submits.value;
							var mobileBubbles = bubbles.value;
							form.reset();
							document.getElementById('dialogButton'+i).click();
							setTimeout(d.getTestCallback(function(){
								var dialogClicks = clicks.value;
								var dialogSubmits = submits.value;
								var dialogBubbles = bubbles.value;
								t.is(nativeClicks, widgetClicks, "widget clicks");
								t.is(nativeSubmits, widgetSubmits, "widget submits");
								t.is(nativeBubbles, widgetBubbles, "widget bubbles");
								t.isNot("000", widgetClicks+""+widgetSubmits+""+widgetBubbles, "not all 0");
								t.is(nativeClicks, mobileClicks, "mobile clicks");
								t.is(nativeSubmits, mobileSubmits, "mobile submits");
								t.is(nativeBubbles, mobileBubbles, "mobile bubbles");
								t.is(nativeClicks, dialogClicks, "dialog clicks");
								t.is(nativeSubmits, dialogSubmits, "dialog submits");
								t.is(nativeBubbles, dialogBubbles, "dialog bubbles");
							}), 0);
						}, 0);
					}, 0);
				}, 0);
				return d;
			};

			doh.register("click behavior", [
				{
					name: "return true",
					timeout: 1000,
					runTest: function(t){
						runTests(t,1);
					}
				},
				{
					name: "return false",
					timeout: 1000,
					runTest: function(t){
						runTests(t,2);
					}
				},
				{
					name: "stopProgation + return true",
					timeout: 1000,
					runTest: function(t){
						runTests(t,3);
					}
				},
				{
					name: "stopProgation + return false",
					timeout: 1000,
					runTest: function(t){
						runTests(t,4);
					}
				},
				{
					name: "preventDefault + return true",
					timeout: 1000,
					runTest: function(t){
						runTests(t,5);
					}
				},
				{
					name: "preventDefault + return false",
					timeout: 1000,
					runTest: function(t){
						runTests(t,6);
					}
				}
			]);

			doh.run();
		});
	</script>
</head>
<body class="claro" role="main">
	<h1 class="testTitle">_ButtonMixin (dijit and mobile) non-robot tests</h1>

	<table id="table">
		<tr>
			<th class="layout">&nbsp;</th>
			<th class="layout">dijit</th>
			<th class="layout">mobile</th>
		</tr>
		<tr>
			<td class="layout">attributes</td>
			<td class="layout"><input id="dijit_attributes" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", label:"original", "class":"mblRedButton"'/></td>
			<td class="layout"><button type="button" class="mblRedButton" id="mobile_attributes" dojoType="dojox.mobile.Button" label="original"/></td>
		</tr>
		<tr>
			<td class="layout">Programmatic</td>
			<td class="layout" id="dijit_programmatic_container"></td>
			<td class="layout" id="mobile_programmatic_container"></td>
		</tr>
	</table>
	<form id="myform" method="get" onsubmit="document.getElementById('submits').value++;return false" onclick="document.getElementById('bubbles').value++;return true;" style="border:1px solid black;margin:10px 0;">
		<legend>Compare native and widget click event behavior:</legend>
		<label for="submits">Submits</label><input id="submits" size="4" disabled value="0">
		<label for="bubbles">Bubbles</label><input id="bubbles" size="4" disabled value="0">
		<label for="clicks">Clicks</label><input id="clicks" size="4" disabled value="0">
		<input type="reset" id="formContainerReset">
		<br>
		<button id="native1" type="submit" onclick="document.getElementById('clicks').value++;return true;">native return true</button>
		<button id="widget1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dijit/form/Button">widget return true</button>
		<button id="mobile1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dojox/mobile/Button">mobile return true</button>
		<button id="dialog1" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton1').click();return false;" data-dojo-type="dijit/form/Button">dialog return true</button>
		<br>
		<button id="native2" type="submit" onclick="document.getElementById('clicks').value++;return false;">native return false</button>
		<button id="widget2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dijit/form/Button">widget return false</button>
		<button id="mobile2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dojox/mobile/Button">mobile return false</button>
		<button id="dialog2" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton2').click();return false;" data-dojo-type="dijit/form/Button">dialog return false</button>
		<br>
		<button id="native3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;">native stopPropagation + return true</button>
		<button id="widget3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dijit/form/Button">widget stopPropagation + return true</button>
		<button id="mobile3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dojox/mobile/Button">mobile stopPropagation + return true</button>
		<button id="dialog3" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton3').click();return false;" data-dojo-type="dijit/form/Button">dialog stopPropagation + return true</button>
		<br>
		<button id="native4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;">native stopPropagation + return false</button>
		<button id="widget4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dijit/form/Button">widget stopPropagation + return false</button>
		<button id="mobile4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dojox/mobile/Button">mobile stopPropagation + return false</button>
		<button id="dialog4" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton4').click();return false;" data-dojo-type="dijit/form/Button">dialog stopPropagation + return false</button>
		<br>
		<button id="native5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;">native preventDefault + return true</button>
		<button id="widget5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dijit/form/Button">widget preventDefault + return true</button>
		<button id="mobile5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dojox/mobile/Button">mobile preventDefault + return true</button>
		<button id="dialog5" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton5').click();return false;" data-dojo-type="dijit/form/Button">dialog preventDefault + return true</button>
		<br>
		<button id="native6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;">native preventDefault + return false</button>
		<button id="widget6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dijit/form/Button">widget preventDefault + return false</button>
		<button id="mobile6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dojox/mobile/Button">mobile preventDefault + return false</button>
		<button id="dialog6" type="button" onclick="arguments[0].stopPropagation();arguments[0].preventDefault();document.getElementById('dialogButton6').click();return false;" data-dojo-type="dijit/form/Button">dialog preventDefault + return false</button>
	</form> 
	<div data-dojo-type="dijit/Dialog" onExecute="document.getElementById('submits').value++;return false" onclick="document.getElementById('bubbles').value++;return true;">
		<button id="dialogButton1" type="submit" onclick="document.getElementById('clicks').value++;return true;" data-dojo-type="dijit/form/Button"></button>
		<button id="dialogButton2" type="submit" onclick="document.getElementById('clicks').value++;return false;" data-dojo-type="dijit/form/Button"></button>
		<button id="dialogButton3" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return true;" data-dojo-type="dijit/form/Button"></button>
		<button id="dialogButton4" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].stopPropagation();return false;" data-dojo-type="dijit/form/Button"></button>
		<button id="dialogButton5" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return true;" data-dojo-type="dijit/form/Button"></button>
		<button id="dialogButton6" type="submit" onclick="document.getElementById('clicks').value++;arguments[0].preventDefault();return false;" data-dojo-type="dijit/form/Button"></button>
	</div>
</body>
</html>
